<template>
	<div class="main">
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/rankedgame/1.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/rankedgame/2.png">
				</div>
			</div>
			<div>
				<div>{{tip}}</div>
				<div>
					<div>
						<div>
							<img v-if="leftInfoData.avatar" :src="leftInfoData.avatar">
							<img v-else src="@/assets/images/wechat/student/rankedgame/3.png">
						</div>
						<div>{{leftInfoData.name}}</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/rankedgame/pk.png">
						</div>
						<div>
							<div>
								<img src="@/assets/images/wechat/student/rankedgame/6.png">
							</div>
							<div>{{countDownData.format}}</div>
						</div>
					</div>
					<div>
						<div>
							<img v-if="rightInfoData.avatar" :src="rightInfoData.avatar">
							<img v-else src="@/assets/images/wechat/student/rankedgame/5.png">
						</div>
						<div>{{rightInfoData.name}}</div>
					</div>
				</div>
			</div>
			<div v-show="contestData.isShow">
				<div>
					<img src="@/assets/images/wechat/student/rankedgame/10.png">
				</div>
				<select>
					<option v-for="(item,index) in difficultyList" :value="item.id" :key="index">{{item.name}}</option>
				</select>
			</div>
			<div v-show="contestData.isShow" @click="insertContest()">
				<div>
					<img src="@/assets/images/wechat/student/rankedgame/bk.png">
				</div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/rankedgame/11.png">
					</div>
					<div>创建队伍</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import router from '@/router/index'
	import { selectAllByParentId } from '@/api/datadictionary'
	import { findStudentByToken,findStudentById } from '@/api/student'
	import { findContest,findContestById,insertContest } from '@/api/contest'
	
	export default {
		components: {
			
		},
		data() {
			return {
				timer: null,
				countDownData: {
					format: '--:--',
					second: 5
				},
				tip: '-----',
				contestData: {
					id: '',
					senderId: '',
					recipientId: '',
					status: 0,
					createTime: 0,
					isShow: true
				},
				leftInfoData:{
					id: '',
					avatar: '',
					name:'----',
				},
				rightInfoData:{
					id: '',
					avatar: '',
					name:'----'
				},
				difficultyList: []
			}
		},
		created:async function() {
			
			//查询自己的信息
			const ajaxData = {}
			const resultData = await findStudentByToken(ajaxData)
			if(resultData.code==200){
				if(resultData.data.firstLogin){
					router.push({path:"/wechatstudent/studentinfo"})
					return
				}
				this.leftInfoData.id = resultData.data.id
				this.leftInfoData.avatar = resultData.data.avatar
				this.leftInfoData.name = resultData.data.name
			} else {
				return
			}
			
			//查询难度字典
			this.selectDifficulty()
			
			//检查是否存在创建过且锁定的比赛
			const ajaxData1 = {}
			ajaxData1.senderId = this.leftInfoData.id
			ajaxData1.status = 1
			const resultData1 = await findContest(ajaxData1)
			if(resultData1.code==200){
				//判断是否有正在进行的校园争霸赛
				if(!resultData1.data.robot) {
					this.$dialog.alert({
					  title: '创建失败',
					  message: '你有正在进行的校园争霸赛',
					  confirmButtonText: '确认',
					}).then(() => {
						router.replace("/wechatstudent/stucenter")
					})
					return
				}
				this.contestData.id=resultData1.data.id
				this.contestData.senderId=resultData1.data.senderId
				this.contestData.recipientId=resultData1.data.recipientId
				this.contestData.status=resultData1.data.status
				this.contestData.createTime=resultData1.data.createTime
				this.contestData.lockTime=resultData1.data.lockTime
				this.contestData.systemTime=resultData1.data.systemTime
			}
			
			//如果比赛不存在就需要创建
			if(!this.contestData.id){
				this.tip = '请创建队伍'
				return
			}
			
			//被锁定
			this.tip = '准备比赛,请不要随意离开'
			this.countDownData.second = 5 - (this.contestData.systemTime - this.contestData.lockTime)
			if(this.countDownData.second < 0&&this.countDownData.second >= -100){
				router.replace({path:"/wechatstudent/answer",query:{id:this.contestData.id}})
			}else if(this.countDownData.second < -100){
				router.replace({path:"/wechatstudent/balance",query:{id:this.contestData.id}})
			} else {
				this.findStudentById(this.contestData.recipientId)
				this.contestData.isShow = false
				this.countDown()
			}
		},
		beforeMount: function() {
	
		},
		mounted: function() {
			
		},
		beforeUnmount: function() {
			//每次进来先清理下定时器
			clearInterval(this.timer)
		},
		methods: {
			async selectDifficulty() {
			  const ajaxData = {}
			  ajaxData.parentId = "d32575c1ef124b3192bb06448951efee"
			  const resultData = await selectAllByParentId(ajaxData)
			  if (resultData.code === 200) {
			    this.difficultyList = resultData.data
			  }
			},
			async findStudentById(id) {
			  const ajaxData = {}
			  ajaxData.id = id
			  const resultData = await findStudentById(ajaxData)
			  if (resultData.code === 200) {
			    this.rightInfoData = resultData.data
			  }
			},
			async insertContest() {
			  const ajaxData = {}
			  ajaxData.robot = true
			  const resultData = await insertContest(ajaxData)
			  if (resultData.code === 200) {
				this.tip = '准备比赛,请不要随意离开'
			    this.contestData.id = resultData.data
				this.contestData.isShow = false
				this.countDown()
				
				const ajaxData1 = {}
				ajaxData1.id = this.contestData.id
				const resultData1 = await findContestById(ajaxData1)
				if(resultData1.code==200){
					this.findStudentById(resultData1.data.recipientId)
				}
			  } else{
				  this.$dialog.alert({
				    title: '提示',
				    message: resultData.msg,
				    confirmButtonText: '确认',
				  }).then(() => {
				  	router.replace("/wechatstudent/stucenter")
				  })
			  }
			},
			countDown() {
				this.timer = setInterval(()=>{
					this.countDownData.second--
					console.log(this.countDownData.second)
					let format = parseInt(this.countDownData.second / 60)
					format = format +':'+ (this.countDownData.second - format*60)
					this.countDownData.format = format
					if(this.countDownData.second==0){
						clearInterval(this.timer)
						router.replace({path:"/wechatstudent/answer",query:{id:this.contestData.id}})
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-image: url(../../../../assets/images/wechat/student/public/bg.jpg);
		background-size: cover;
		background-position: center;
		//background-color: #670914;
		>div:nth-child(1){
			overflow: hidden;
			margin-top:34px;
			margin-left:16px;
			margin-right:16px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					width: 100%;
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					width: 100%;
					position: absolute;
					top:0;
					left:0;
					>img{
						width:100%;
					}
				}
			}
			>div:nth-child(2){
				margin-top:24px;
				>div:nth-child(1){
					text-align: center;
					font-size: 14px;
					font-weight: normal;
					color: #FFFFFF;
				}
				>div:nth-child(2){
					margin-top:30px;
					display:flex;
					justify-content: space-around;
					>div:nth-child(1),>div:nth-child(3){
						>div:nth-child(1){
							width:63px;
							height:63px;
							margin: auto;
							overflow:hidden;
							border-radius: 50%;
							>img{
								width:100%;
							}
						}
						>div:nth-child(2){
							font-size: 12px;
							color: #FFFFFF;
							margin-top:6px;
							text-align: center;
						}
					}
					>div:nth-child(2){
						margin-top:8px;
						>div:nth-child(2){
							display:flex;
							align-items: center;
							justify-content: center;
							background-color: #BA7C1A;
							width: 58px;
							margin:auto;
							margin-top:12px;
							height:20px;
							>div:nth-child(2){
								margin-left:3px;
								font-size:12px;
								color:#FFFFFF;
							}
						}
					}
				}
			}
			>div:nth-child(3){
				width:100px;
				margin:auto;
				margin-top:22px;
				position: relative;
				display: flex;
				background: url(../../../../assets/images/wechat/student/rankedgame/bk.png)no-repeat;
				>div{
					
					margin-left:8px;
					margin-top:8px;
				}
				>select{
					width:100%;
					outline: none;
					line-height:26px;
					height:25px;
					font-size: 15px;
					text-align-last:center;
					appearance: none;
					color:#FFFFFF;
					background-color: rgba(0,0,0,0);
					border-radius:5px;
					border: 0px;
				}
			}
			>div:nth-child(4){
				width:100px;
				margin:auto;
				margin-top:10px;
				position: relative;
				>div:nth-child(1){
					>img{
						wdith:100%;
					}
				}
				>div:nth-child(2){
					position: absolute;
					left:0;
					top:0;
					padding-left:8px;
					padding-top:2px;
					display:flex;
					align-items: center;
					>div:nth-child(2){
						margin-left:5px;
						color:#FFFFFF;
						font-size: 15px;
					}
				}
			}
		}
	}
</style>
